<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?php
include_once("php/dbconfig.php");
//header("Content-Type: text/html;charset=uft-8");
?>
<head id="Head1">
    <title>	My Calendar </title>
    
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <link href="css/dailog.css" rel="stylesheet" type="text/css" />
    <link href="css/calendar.css" rel="stylesheet" type="text/css" /> 
    <link href="css/dp.css" rel="stylesheet" type="text/css" />   
    <link href="css/alert.css" rel="stylesheet" type="text/css" /> 
    <link href="css/main.css" rel="stylesheet" type="text/css" /> 
    <!--
    <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
    <script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>
    <script type='text/javascript'
      src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'>
</script>
    -->
    <!--
    <script type="text/javascript" src="/Users/user/Downloads/firebug-lite/build/firebug-lite.js"></script>
    <script type="text/javascript" src="/Users/user/Downloads/firebug-lite/build/firebug-lite-debug.js"></script>
    -->
    <script src="src/jquery.js" type="text/javascript"></script>  
    
    <script src="src/Plugins/Common.js" type="text/javascript"></script>    
    <script src="src/Plugins/datepicker_lang_HK.js" type="text/javascript"></script>     
    <script src="src/Plugins/jquery.datepicker.js" type="text/javascript"></script>

    <script src="src/Plugins/jquery.alert.js" type="text/javascript"></script>    
    <script src="src/Plugins/jquery.ifrmdailog.js" defer="defer" type="text/javascript"></script>
    <script src="src/Plugins/wdCalendar_lang_HK.js" type="text/javascript"></script>    
    <script src="src/Plugins/jquery.calendar.js" type="text/javascript"></script>   
    
    <script type="text/javascript">
        
//         (function($) {   
//       $.fn.ShowTitle = function()
//    { 
//        $('<div id="conBox"></div>').appendTo('body'); 
//        var d=$("#conBox"); 
//        this.bind({ 
//                    mouseover:function(){ 
//                    if(!$("#conBox")){ 
//                        $('<div id="conBox"></div>').appendTo('body'); 
//                    }else{ 
//                            d=$("#conBox"); 
//                         } 
//                                var of=$(this).offset(); 
//                                //var title=$(this).attr("title"); 
//                                //定义位置 
//                                d.css({top:of.top+$(this).height()+"px",left:$(this).width()/2+of.left+"px"}).text($(this).attr("title")); 
//                                //显示 
//                                d.fadeIn(); 
//                            }, 
//                            mouseout:function(){ 
//                                //鼠标一走隐藏 
//                                d.fadeOut(); 
//                            } 
//                   }); 
//     } 
//   })(jQuery);       
   
   
   
        
        
        
        
        
        
        
        
        
        
        
        
        $(document).ready(function() {     
           var view="week";          
           
            var DATA_FEED_URL = "php/datafeed.php";
            var op = {
                view: view,
                theme:3,
                showday: new Date(),
                EditCmdhandler:Edit,
                DeleteCmdhandler:Delete,
                ViewCmdhandler:View,    
                onWeekOrMonthToDay:wtd,
                onBeforeRequestData: cal_beforerequest,
                onAfterRequestData: cal_afterrequest,
                onRequestDataError: cal_onerror, 
                autoload:true,
                readonly: true,
                //enableDrag: false,
                url: DATA_FEED_URL + "?method=list",  
                //quickAddUrl: DATA_FEED_URL + "?method=add", 
                quickUpdateUrl: DATA_FEED_URL + "?method=update",
                quickDeleteUrl: DATA_FEED_URL + "?method=remove"       
            };
            var $dv = $("#calhead");
            var _MH = document.documentElement.clientHeight;
            var dvH = $dv.height() + 2;
            op.height = _MH - dvH;
            op.eventItems =[];
            
            var p = $("#gridcontainer").bcalendar(op).BcalGetOp();
            if (p && p.datestrshow) {
                $("#txtdatetimeshow").text(p.datestrshow);
            }
            $("#caltoolbar").noSelect();
            
            $("#hdtxtshow").datepicker({ picker: "#txtdatetimeshow", showtarget: $("#txtdatetimeshow"),
            onReturn:function(r){                          
                            var p = $("#gridcontainer").gotoDate(r).BcalGetOp();
                            if (p && p.datestrshow) {
                                $("#txtdatetimeshow").text(p.datestrshow);
                            }
                     } 
            });
            function cal_beforerequest(type)
            {
                var t="Loading data...";
                switch(type)
                {
                    case 1:
                        t="Loading data...";
                        break;
                    case 2:                      
                    case 3:  
                    case 4:    
                        t="The request is being processed ...";                                   
                        break;
                }
                $("#errorpannel").hide();
                $("#loadingpannel").html(t).show();    
            }
            function cal_afterrequest(type)
            {
                switch(type)
                {
                    case 1:
                        $("#loadingpannel").hide();
                        break;
                    case 2:
                    case 3:
                    case 4:
                        $("#loadingpannel").html("Success!");
                        window.setTimeout(function(){ $("#loadingpannel").hide();},2000);
                    break;
                }              
               
            }
            function cal_onerror(type,data)
            {
                $("#errorpannel").show();
            }
            function Edit(data)
            {
               var eurl="edit.php?id={0}&start={2}&end={3}&isallday={4}&title={1}";   
                if(data)
                {
                    var url = StrFormat(eurl,data);
                    OpenModelWindow(url,{ width: 600, height: 400, caption:"Manage  The Calendar",onclose:function(){
                       $("#gridcontainer").reload();
                    }});
                }
            }    
            function View(data)
            {
                var str = "";
                $.each(data, function(i, item){
                    str += "[" + i + "]: " + item + "\n";
                });
                alert(str);               
            }    
            function Delete(data,callback)
            {           
                
                $.alerts.okButton="Ok";  
                $.alerts.cancelButton="Cancel";  
                hiConfirm("Are You Sure to Delete this Event", 'Confirm',function(r){ r && callback(0);});           
            }
            function wtd(p)
            {
               if (p && p.datestrshow) {
                    $("#txtdatetimeshow").text(p.datestrshow);
                }
                $("#caltoolbar div.fcurrent").each(function() {
                    $(this).removeClass("fcurrent");
                })
                $("#showdaybtn").addClass("fcurrent");
            }
            //to show day view
            $("#showdaybtn").click(function(e) {
                //document.location.href="#day";
                $("#caltoolbar div.fcurrent").each(function() {
                    $(this).removeClass("fcurrent");
                })
                $(this).addClass("fcurrent");
                var p = $("#gridcontainer").swtichView("day").BcalGetOp();
                if (p && p.datestrshow) {
                    $("#txtdatetimeshow").text(p.datestrshow);
                }
            });
            //to show week view
            $("#showweekbtn").click(function(e) {
                //document.location.href="#week";
                $("#caltoolbar div.fcurrent").each(function() {
                    $(this).removeClass("fcurrent");
                })
                $(this).addClass("fcurrent");
                var p = $("#gridcontainer").swtichView("week").BcalGetOp();
                if (p && p.datestrshow) {
                    $("#txtdatetimeshow").text(p.datestrshow);
                }

            });
            //to show month view
            $("#showmonthbtn").click(function(e) {
                //document.location.href="#month";
                $("#caltoolbar div.fcurrent").each(function() {
                    $(this).removeClass("fcurrent");
                })
                $(this).addClass("fcurrent");
                var p = $("#gridcontainer").swtichView("month").BcalGetOp();
                if (p && p.datestrshow) {
                    $("#txtdatetimeshow").text(p.datestrshow);
                }
                
                //if($("#[id^=bbit_cal_event]").length > 0)
                //    {
                //        alert($("#[id^=bbit_cal_event]").length);
                //        $("#[id^=bbit_cal_event]").ShowTitle();
                //    }
            });
            
            
            
            
            $("#showreflashbtn").click(function(e){
                $("#gridcontainer").reload();
            });
            
                        
            $("#slcteventtype").change(function(e)
            {       
                $("#gridcontainer").reload();
            });
            
            $("#slctcity").change(function(e)
            {
                //ajax call to get the venues assciation with city
                $.post(DATA_FEED_URL + "?method=getVenuesByCityId",
                {cityid: $("#slctcity").val()},
                function (data){
                    
                    //if(data.error != null)
                    //{
                       //var selectcitytext = $("#slctcity").find("option:selected").text();
                       var selectcityval = $("#slctcity").find("option:selected").val();
                       
                       
                       $("#slctvenue")
                       //.find('option')
                       //.remove()
                       //.end()
                       .empty();
                       
                       if(selectcityval != 0)
                       {
                           var selectcitytext = $("#slctcity").find("option:selected").text();
                           $("#slctvenue")
                           .append('<option value="0">選擇'+selectcitytext+'場地</option>');
                           //alert(selectcitytext);
                       }
                       else
                       {
                           $("#slctvenue")
                           .append('<option value="0">所有場地</option>');    
                       }
                       
                         
                       //alert(selectcitytext);
                    //}
                    $.each(data.venues,function(index, value){
                        //alert("count element: " + index + value[0]);
                    $("#slctvenue").append('<option value = ' 
                                          + value[0] 
                                          +'>'
                                          + value[1]
                                          + '</option>');
                    //alert("count element: " + index + value[0] + value[1]);                  
                    });},
                "json");
                
                
                
                $("#gridcontainer").reload();
            });
            
            $("#slctvenue").change(function(e)
            {       
                $("#gridcontainer").reload();
            });
            
            //Add a new event
            $("#faddbtn").click(function(e) {
                var url ="edit.php?id=";
                OpenModelWindow(url,{ width: 500, height: 400, caption: "Create New Calendar"});
            });
            //go to today
            $("#showtodaybtn").click(function(e) {
                var p = $("#gridcontainer").gotoDate().BcalGetOp();
                if (p && p.datestrshow) {
                    $("#txtdatetimeshow").text(p.datestrshow);
                }


            });
            //previous date range
            $("#sfprevbtn").click(function(e) {
                var p = $("#gridcontainer").previousRange().BcalGetOp();
                if (p && p.datestrshow) {
                    $("#txtdatetimeshow").text(p.datestrshow);
                }

            });
            //next date range

            $("#sfnextbtn").click(function(e) {
                var p = $("#gridcontainer").nextRange().BcalGetOp();
                if (p && p.datestrshow) {
                    $("#txtdatetimeshow").text(p.datestrshow);
                }
            });
            
          //$("#[id^=bbit_cal_event]").ShowTitle();
          
          //alert($("#[id^=bbit_cal_event]").length);
            
            
        });
    </script> 
    
    
    <style type="text/css">
   #showDescriptiondiv{
  position:absolute;
  width:220px;
  height:auto;
  border:1px solid #01888c;
  left:10px;
  display:none;
  top:20px;
  z-index:888;
  background:#FFF;
  background:#C9D9E1;
  border:3px solid #FFCF95;  /*城市边框色*/ 
  float:left;
  margin-top:10px;
  _margin-top:10px;
}
        
        #conBox{ position:absolute; width:200px;padding:5px;display:none;background:#666;z-index:999;border-radius:5px;}
    </style>
</head>
<body>
    
    <div>

      <div id="calhead" style="padding-left:1px;padding-right:1px;">          
            <div class="cHead"><div class="ftitle"><!--My Calendar-->日程</div>
            <div id="loadingpannel" class="ptogtitle loadicon" style="display: none;"><!--Loading data...-->下載數據中...</div>
             <div id="errorpannel" class="ptogtitle loaderror" style="display: none;"><!--Sorry, could not load your data, please try again later-->抱歉,不能更新到你的數據,請重試</div>
            </div>          
            
            <div id="caltoolbar" class="ctoolbar">
              <div id="faddbtn" class="fbutton">
                <div><span title='Click to Create New Event' class="addcal">

                <!--New Event-->
                新日程
                </span></div>
            </div>
            <div class="btnseparator"></div>
             <div id="showtodaybtn" class="fbutton">
                <div><span title='Click to back to today ' class="showtoday">
                <!--Today-->今天</span></div>
            </div>
              <div class="btnseparator"></div>

            <div id="showdaybtn" class="fbutton">
                <div><span title='Day' class="showdayview"><!--Day-->天</span></div>
            </div>
              <div  id="showweekbtn" class="fbutton fcurrent">
                <div><span title='Week' class="showweekview"><!--Week-->周</span></div>
            </div>
              <div  id="showmonthbtn" class="fbutton">
                <div><span title='Month' class="showmonthview"><!--Month-->月</span></div>

            </div>
            <div class="btnseparator"></div>
              <div  id="showreflashbtn" class="fbutton">
                <div><span title='Refresh view' class="showdayflash"><!--Refresh-->刷新</span></div>
                </div>
             <div class="btnseparator"></div>
            <div id="sfprevbtn" title="Prev"  class="fbutton">
              <span class="fprev"></span>

            </div>
            <div id="sfnextbtn" title="Next" class="fbutton">
                <span class="fnext"></span>
            </div>
            <div class="fshowdatep fbutton">
                    <div>
                        <input type="hidden" name="txtshow" id="hdtxtshow" />
                        <span id="txtdatetimeshow"><!--Loading-->選擇日期</span>

                    </div>
            </div>
             
               
             <?php
             
             //echo '<input type="hidden" name="showslctevnttype" id="showslcteventtype" value="true"/>';
             //echo '<span id="slcteventtypespan">';
             //echo '選擇類型';
             echo '<select name = "slcteventtype" id = "slcteventtype">';
             echo '<option value= "0" >選擇類型</option>';
             echo '</select>';
             //echo '</span>';
             ?>
                 
             
             <?php
                 echo '<select name = "slctcity" id = "slctcity">'; 
                 echo '<option value= "0" >選擇城市</option>';
                 
                  //$db = new DBConnection();
                  // $db->getConnection();
                  // $sql = "select * from `city`";
                  // $result = mysql_query($sql);       
                 //while($row = mysql_fetch_array($result))  
                 //{
                 //    echo "<option value='{$row['cid']}'> {$row['name_zh_hk']}</option>";
                 //}
                echo '</select>'; 
                //$db->closeConnection();
               ?>
             
              <?php
                 echo '<select name = "slctvenue" id ="slctvenue" >';
                 echo '<option value= "0" >選擇場地</option>';
                  //$db = new DBConnection();
                  //$db->getConnection();
                  //$sql = "select * from `venue`";
                  // $result = mysql_query($sql);    
                  // $countvenue = 0;
                 //while($row = mysql_fetch_array($result))  
                 //{
                  //   $countvenue++ ;
                 //    if($countvenue >=80)
                 //    {
                 //        echo "<option value= 'other'>Other</option>";
                 //    }else
                 //    {
                 //        echo "<option value= '{$row['vid']}'> {$row['name_zh_hk']}</option>";
                 //    }
                     
                // }
                echo '</select>'; 
                //$db->closeConnection();
               ?> 
            
            <div class="clear"></div>
            </div>
      </div>
      <div style="padding:1px;">

        <div class="t1 chromeColor">
            &nbsp;</div>
        <div class="t2 chromeColor">
            &nbsp;</div>
        <div id="dvCalMain" class="calmain printborder">
            <div id="gridcontainer" style="overflow-y: visible;">
            </div>
        </div>
        <div class="t2 chromeColor">

            &nbsp;</div>
        <div class="t1 chromeColor">
            &nbsp;
        </div>   
        </div>
     
  </div>
 
    
     
</body>
</html>


